import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin ={
  install(app){
    // 封装自定义资料实现图片懒加载功能
    //* vue 自定义指令 https://cn.vuejs.org/guide/reusability/custom-directives.html#custom-directives
    app.directive('img-lazy',{
      mounted(el,binding){
        // el 指令绑定的那个元素 img
        // binding ：binding.value 指令等号后面的值  这里是图片的url
        // console.log(el,binding.value)
        // 使用 vueUse 实现监听图片进入视口区域然后发起请求获取图片
        //* https://vueuse.pages.dev/core/useIntersectionObserver/#useintersectionobserver
        const {stop} = useIntersectionObserver( el,
          ([{ isIntersecting }]) => {
            // console.log(isIntersecting)
            // 进入视口区域 给图片赋值
            if(isIntersecting) {
              el.src=binding.value
              stop() //* stop 的作用是只要图片获取一次后就不再获取了，提高性能减少网络请求 #7cc5a2  #00ff00
            }
          })
      }
    })
  }
}